<template>
    <div class="cart">
        <div v-if="allGoods.length">
        <div v-for="(item,index) in allGoods" :key="index">
        <div class="goods-item">    
         <div class="left">
            <img :src="item.img" />
         </div>
         <div class="right">
            <div class="title">商品名称：{{ item.name }}</div>
            <div class="price">商品价格：{{ item.price }}</div>
         </div>
         <div class="action">
            <div class="add">
                <van-button icon="plus" size="mini" type="primary" @click="add(item)"/>
            </div>
            <div class="del">
                <van-button icon="minus" size="mini" type="primary" @click="minus(item)"/>
            </div>
         </div>
        </div>
     </div>
    </div>
    <div v-else>
        <van-empty description="购物车里暂时没有商品啦，快去添加吧！" />
    </div>
    <van-action-bar>
        <van-action-bar-icon
         icon="cart-o"
         text="总数"
         :badge="totalCount"
         @click="onClickCount(totalCount)"/>
         <van-action-bar-icon
          icon="shop-o"
          text="总价"
          :badge="totalPrice"
          @click="onClickPrice(totalPrice)"/>
          <van-action-bar-button type="danger" text="立即购买" @click="onBuying"/>
    </van-action-bar>
</div>
</template>

<script>
 import {getCurrentInstance,reactive,toRefs} from 'vue'
 import {useRoute} from 'vue-router'

 export default {
    setup(){
        const {proxy} = getCurrentInstance()
        const state = reactive({
            goods:'',
            allGoods: JSON.parse(localStorage.getItem('allGoods')) || [],
            totalCount:0,
            totalPrice:0,
        })
        let route = useRoute()
        let goods = route.query;

        if(goods.name){
            state.goods = goods;
            state.allGoods.push(state.goods)
            localStorage.setItem('allGoods',JSON.stringify(state.allGoods))
        }
        state.totalCount = state.allGoods.length;
        state.allGoods.forEach(item =>{
            state.totalPrice += item.price ? parseInt(item.price) : 0
        });
        //合计
        const computeTotal = () => {
         state.totalCount = state.allGoods.length;
         state.allGoods.forEach(item => {
            state.totalPrice += item.price ? parseInt(item.price) : 0
         });
        }
        computeTotal();
        const onClickCount = (count) =>{
            proxy.$toast(`您一共选择了${count}件商品`)
        };
        
        const onClickPrice = (price) => {
            proxy.$toast(`您应支付共${price}元`)
        };
        const onBuying = () => {
         //清空购物车
            proxy.$toast.success('购买成功')
            localStorage.removeItem('allGoods');
            state.totalCount= 0;
            state.totalPrice= 0;
            state.allGoods=[];
        }

        const add = (good) => {
          state.allGoods.push(good);
          localStorage.setItem('allGoods', JSON.stringify(state.allGoods))
          computeTotal();
        }

        const minus = (good) => {
        const index = state.allGoods.indexOf(good);
           state.allGoods.splice(index, 1);
           localStorage.setItem('allGoods', JSON.stringify(state.allGoods))
           computeTotal();
        }
        return{
            goods,
            ...toRefs(state),
            onClickCount,
            onClickPrice,
            onBuying,
            add,
            minus,
        };
    },
 }
</script>

<style scoped>
 .cart{
    padding-bottom: 6.25rem;
 }
 .goods-item{
    display: flex;
    padding: 10px;
    border: 1px solid #eee;
 }
 .left{
    flex: 1;
    height: 6.25rem;
 }
 .left img{
    width: 100%;
    height: 100%;
 }
 .right{
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
 }
 .right.title,
 .right.price{
    margin-left: 1.25rem;
    margin-bottom: 1.25rem;

 }
 .action{
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
 }
 .van-action-bar{
    bottom: 50px;
    justify-content: space-around;
 }
 .van-action-bar-button--last{
    max-width: 200px !important;
 }
</style>